<template>
  <van-sticky :offset-top="0">
    <div style="display: flex; background-color: #fff">
      <div style="height: 54px; line-height: 54px">
        <van-icon name="arrow-left" @click="goback" />
      </div>
      <van-search
        style="width: 100%"
        v-model="searchValue"
        show-action
        :clearable="false"
        placeholder="请输入搜索关键词"
      >
        <template #action>
          <div @click="search">搜索</div>
        </template>
      </van-search>
    </div>
  </van-sticky>
  <div class="goods_list">
    <van-tabs
      v-model:active="active"
      offset-top="54"
      @click-tab="onClickTab"
      animated
      sticky
    >
      <van-tab v-for="index in ['推荐', '新品', '价格']" :title="index">
        <Goods :shop-list="List" style="margin-top: 10px" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import Goods from "@/components/Goods.vue";
import { useRouter, onBeforeRouteLeave } from "vue-router";
import { getShopList, getSearch, orderPrice } from "@/api/shop";
import { ref } from "vue";
import { toast, close } from "@/util/toast";
const List = ref([]);
const searchValue = ref("");
const router = useRouter();
const goback = () => {
  router.go(-1);
};
// const getList = async () => {
//   const { data } = await getShopList();
//   List.value = data.data;
//   console.log(data);
// };
// getList();
// 搜索
const search = async () => {
  toast("loading", "搜索中...", 10000);
  const { data } = await getSearch(searchValue.value);
  if (!data.length) {
    return;
  }
  console.log(data);
  List.value = data;
  close();
};
//标签切换
const onClickTab = async ({ title }) => {
  if (title === "价格") {
    const { data } = await orderPrice(searchValue.value);
    if (!data.res.length) {
      return;
    }
    List.value = data.res;
  }
};
</script>
<style lang="scss" scoped>
.goods_list {
  background-color: #f9f9f9;
  height: 100vh;
}
</style>
